import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomBoxWidget extends StatefulWidget {
  const CustomBoxWidget({required Key key, this.introduce = "introduce"});

  final String introduce;

  @override
  _BoxWidgetState createState() => new _BoxWidgetState();
}

class _BoxWidgetState extends State<CustomBoxWidget> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    //初始化状态
    print("initState");
  }

  Widget redBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
  );

  @override
  Widget build(BuildContext context) {
    print("build");
    return SingleChildScrollView(
      child: Column(
        verticalDirection: VerticalDirection.down,
        children: [
          UnconstrainedBox(
              child: LimitedBox(
                  maxWidth: 100,
                  child: Container(
                    color: Color(0xFF15EEC6),
                    width: double.infinity,
                    height: 100,
                  )
              )
          ),
          Container(
            height: 5.0,
            width: 30,
            child: DecoratedBox(
              decoration: BoxDecoration(color: Color(0xFF09ADD5)),
            ),
          ),
          SizedBox(width: 80.0, height: 80.0, child: redBox),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(" hello world a"),
              Text(" I am Jack "),
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(" hello world 2"),
              Text(" I am Jack "),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            textDirection: TextDirection.rtl,
            children: <Widget>[
              Text(" hello world 3"),
              Text(" I am Jack "),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            //biao shi liang hang wen ben dui qi
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
              Text(
                " hello world 4",
                style: TextStyle(fontSize: 30.0),
              ),
              Text(" I am Jack "),
            ],
          ),
          //
          Text(" 下面是流式布局"),
          Wrap(
            spacing: 8.0, // 主轴(水平)方向间距
            runSpacing: 4.0, // 纵轴（垂直）方向间距
            alignment: WrapAlignment.center, //沿主轴方向居中
            children: <Widget>[
              Text('1=Asafgasgasga'),
              Text('2=Atwatfwasaggggggggggggggggggggggggggggggggggggggg'),
              Text('3=Asgas'),
              Text('4=Aasgggggggggggg'),
            ],
          ),
          Flow(
            delegate: TestFlowDelegate(margin: EdgeInsets.all(10.0)),
            children: <Widget>[
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.red,
              ),
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.green,
              ),
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.blue,
              ),
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.yellow,
              ),
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.brown,
              ),
              Container(
                width: 80.0,
                height: 80.0,
                color: Colors.purple,
              ),
            ],
          ),
          Text(" 下面是层叠布局"),
          Container(
            width: 500,
            height: 500,
            child: Stack(
              alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
              children: <Widget>[

                Container(
                  child: Text("Hello world",
                      style: TextStyle(color: Colors.white)),
                  color: Colors.red,
                ),
                  Positioned(
                    top: 118.0,
                    child: Text("I am Jack"),
                  ),

                Positioned(
                  top: 118.0,
                  child: Text("Your friend"),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void didUpdateWidget(CustomBoxWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  @override
  void deactivate() {
    super.deactivate();
    print("deactive");
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }

  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
}

class TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin;

  TestFlowDelegate({this.margin = EdgeInsets.zero});

  double width = 0;
  double height = 0;

  @override
  void paintChildren(FlowPaintingContext context) {
    var x = margin.left;
    var y = margin.top;
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
      var w = context.getChildSize(i)!.width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        //绘制子widget(有优化)
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x += context.getChildSize(i)!.width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    // 指定Flow的大小，简单起见我们让宽度竟可能大，但高度指定为200，
    // 实际开发中我们需要根据子元素所占用的具体宽高来设置Flow大小
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}


